<template>
  <custom-navbar title="招聘漏斗" :auto-back="true" left-icon-color="#303133" />
  <view class="bg-#fff">
    <view class="top-tabs h-100rpx flex justify-center items-center text-center text-30rpx leading-42rpx">
      <view v-for="it, ind in totalTitleTypeList">
        <view class="active flex-1"
        v-if="totalCurrentType == it.id"
        @click="onClickChangeTotalType(ind)">
          <text class="text">
            {{it.content}}
          </text>
        </view>
        <view class="flex-1 color-#333333"
        v-if="totalCurrentType != it.id"
        @click="onClickChangeTotalType(ind)">
          <text class="text">
            {{it.content}}
          </text>
        </view>
        <up-line length="30rpx" color="#f4f5f6" direction="col"/>
      </view>
    </view>
    <up-line color="#f4f5f6" />
    <view class="p-24rpx">
      <view class="h-[68rpx] flex items-center border-[2rpx] border-[#d8d8d8] rounded-[36rpx] border-solid pl-30rpx pr-10rpx">
        <view class="shrink-0">
          <up-icon :name="Img1" width="40rpx" height="40rpx" />
        </view>
        <view class="flex-auto px-10rpx">
          <up-input :custom-style="{ width: '100%', textAlign: 'center' }" input-align="center" placeholder="年月日" border="none" font-size="24rpx" />
        </view>
        <view class="text-28rpx color-#333333">
          至
        </view>
        <view class="flex-auto px-10rpx">
          <up-input :custom-style="{ width: '100%', textAlign: 'center' }" input-align="center" placeholder="年月日" border="none" font-size="24rpx" />
        </view>
      </view>
    </view>
  </view>
  <scroll-view scroll-x class="w-100% overflow-x-auto py-30rpx">
    <view class="flex whitespace-nowrap px-24rpx text-26rpx color-#1d2129">
      <view v-for="ite, inde in titleTypeList">
        <view class="mr-16rpx border-[2rpx] border-[#1f50f2] rounded-[8rpx] border-solid bg-#e8edfe px-30rpx color-#1f50f2 leading-[60rpx]"
        v-if="currentType == inde" @click="onClickChangeType(inde, ite.id)">
            {{ite.content}}
        </view>
        <view class="mr-16rpx border-[2rpx] border-[#fff] rounded-[8rpx] bg-#fff px-30rpx leading-[60rpx]"
        v-if="currentType != inde" @click="onClickChangeType(inde, ite.id)">
          {{ite.content}}
        </view>
      </view>
    </view>
  </scroll-view>
  <view class="block-box">
    <view class="px-12rpx text-32rpx color-#1D2129 leading-36rpx">
      数据分析
    </view>
    <qiun-data-charts type="funnel" :opts="opts1" :chart-data="chartData1" />
  </view>
  <view class="block-box">
    <view class="px-12rpx text-32rpx color-#1D2129 leading-36rpx">
      性别
    </view>
    <view class="flex items-center justify-between">
      <view class="whitespace-nowrap">
        <view class="mb-24rpx flex items-center">
          <view class="h-18rpx w-8rpx bg-#6fcf97" />
          <text class="mx-12rpx color-#4e5969">
            男
          </text>
          <text class="color-#1d2129 font-700">
            {{genderDetail.male_count}} ({{genderDetail.male_count/genderDetail.total*100}}%)
          </text>
        </view>
        <view class="flex items-center">
          <view class="h-18rpx w-8rpx bg-#4983de" />
          <text class="mx-12rpx color-#4e5969">
            女
          </text>
          <text class="color-#1d2129 font-700">
            {{genderDetail.woman_count}} ({{genderDetail.woman_count/genderDetail.total*100}}%)
          </text>
        </view>
      </view>
      <view class="relative mr-[-25rpx] h-500rpx w-1rpx">
        <view class="absolute right-0 h-500rpx w-500rpx">
          <qiun-data-charts type="ring" :opts="opts2" :chart-data="chartData2" />
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="px-12rpx text-32rpx color-#1D2129 leading-36rpx">
      学校类别
    </view>
    <view class="flex items-center justify-between">
      <view class="whitespace-nowrap">
        <view class="mb-24rpx flex items-center">
          <view class="h-18rpx w-8rpx bg-#6fcf97" />
          <text class="mx-12rpx color-#4e5969">
            985/211/双一流
          </text>
          <text class="color-#1d2129 font-700">
            {{schoolTypeDetail.a}} ({{schoolTypeDetail.a/schoolTypeDetail.total*100}}%)
          </text>
        </view>
        <view class="mb-24rpx flex items-center">
          <view class="h-18rpx w-8rpx bg-#4983de" />
          <text class="mx-12rpx color-#4e5969">
            普通本科高校
          </text>
          <text class="color-#1d2129 font-700">
            {{schoolTypeDetail.b}} ({{schoolTypeDetail.b/schoolTypeDetail.total*100}}%)
          </text>
        </view>
        <view class="flex items-center">
          <view class="h-18rpx w-8rpx bg-#f7be6c" />
          <text class="mx-12rpx color-#4e5969">
            专科学校
          </text>
          <text class="color-#1d2129 font-700">
            {{schoolTypeDetail.c}} ({{schoolTypeDetail.c/schoolTypeDetail.total*100}}%)
          </text>
        </view>
      </view>
      <view class="relative mr-[-25rpx] h-500rpx w-1rpx">
        <view class="absolute right-0 h-500rpx w-500rpx">
          <qiun-data-charts type="ring" :opts="opts3" :chart-data="chartData3" />
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="px-12rpx text-32rpx color-#1D2129 leading-36rpx">
      学历
    </view>
    <view class="flex items-center justify-between">
      <view class="whitespace-nowrap">
        <view class="mb-24rpx flex items-center">
          <view class="h-18rpx w-8rpx bg-#6fcf97" />
          <text class="mx-12rpx color-#4e5969">
            博士
          </text>
          <text class="color-#1d2129 font-700">
            {{qualificationDetail.first_count}} ({{qualificationDetail.first_count/qualificationDetail.total*100}}%)
          </text>
        </view>
        <view class="mb-24rpx flex items-center">
          <view class="h-18rpx w-8rpx bg-#4983de" />
          <text class="mx-12rpx color-#4e5969">
            硕士
          </text>
          <text class="color-#1d2129 font-700">
            {{qualificationDetail.second_count}} ({{qualificationDetail.second_count/qualificationDetail.total*100}}%)
          </text>
        </view>
        <view class="mb-24rpx flex items-center">
          <view class="h-18rpx w-8rpx bg-#f7be6c" />
          <text class="mx-12rpx color-#4e5969">
            本科
          </text>
          <text class="color-#1d2129 font-700">
            {{qualificationDetail.third_count}} ({{qualificationDetail.third_count/qualificationDetail.total*100}}%)
          </text>
        </view>
        <view class="flex items-center">
          <view class="h-18rpx w-8rpx bg-#647d97" />
          <text class="mx-12rpx color-#4e5969">
            专科
          </text>
          <text class="color-#1d2129 font-700">
            {{qualificationDetail.fourth_count}} ({{qualificationDetail.fourth_count/qualificationDetail.total*100}}%)
          </text>
        </view>
      </view>
      <view class="relative mr-[-25rpx] h-500rpx w-1rpx">
        <view class="absolute right-0 h-500rpx w-500rpx">
          <qiun-data-charts type="ring" :opts="opts4" :chart-data="chartData4" />
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="px-12rpx text-32rpx color-#1D2129 leading-36rpx">
      主要来源籍贯
    </view>
    <up-gap height="38rpx" />
    <view class="px-12rpx"
    v-for="item,index in nativePlaceList">
      <view class="mb-40rpx flex items-center">
        <view class="mr-20rpx color-#1D2129 leading-34rpx">
          {{item.name}}
        </view>
        <view class="h-[10rpx] w-[200rpx] rounded-[6rpx] bg-#1890fb" :class="changeProgress(index)"/>
        <view class="ml-24rpx font-700">
          {{item.count}} ({{item.count/nativePlaceTotal*100}}%)
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="px-12rpx text-32rpx color-#1D2129 leading-36rpx">
      主要来源学校
    </view>
    <up-gap height="38rpx" />
    <view class="px-12rpx">
      <view class="mb-42rpx flex items-center b-b-1rpx b-b-#f7f7f8 b-b-solid pb-22rpx text-26rpx color-#7b7b7b leading-36rpx">
        <view class="w-100rpx shrink-0">
          序号
        </view>
        <view class="flex-auto">
          高校名称
        </view>
        <view class="w-150rpx shrink-0">
          人数占比
        </view>
      </view>
      <view v-for="item, index in schoolList">
        <view class="mb-40rpx flex items-center pb-22rpx text-26rpx color-#333 leading-36rpx">
          <view class="w-100rpx shrink-0">
            {{index+1}}
          </view>
          <view class="flex-auto">
            {{item.name}}
          </view>
          <view class="w-150rpx shrink-0">
            {{item.count}} ({{item.count/schoolTotal*100}}%)
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="h-100rpx pb-safe" />
</template>

<script setup lang="ts">
// import Img1 from '@/static/images/enterprise/img-1.png';
import { statisticsJobType, statisticsJob } from '@/api/user';
  const Img1 = 'https://yiliao.test03.qcw800.com/static/images/enterprise/img-1.png'
const opts1 = ref({
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: true,
    position: 'right',
    lineHeight: 25,
  },
  extra: {
    funnel: {
      activeOpacity: 0.3,
      activeWidth: 10,
      border: true,
      borderWidth: 2,
      borderColor: '#FFFFFF',
      fillOpacity: 1,
      labelAlign: 'right',
      type: 'triangle',
    },
  },
});
const chartData1 = ref({
  series: [
    {
      data: [
        { name: '查看简历', centerText: '0', value: 0 },
        { name: '已联系', centerText: '0', value: 0 },
        { name: '通过初筛', centerText: '0', value: 0 },
        { name: '通过初试', centerText: '0', value: 0 },
        { name: '通过复试', centerText: '0', value: 0 },
        { name: '通过终试', centerText: '0', value: 0 },
        { name: '已签约', centerText: '0', value: 0 },
      ]
    },
  ],
});
const opts2 = ref({
  rotate: false,
  rotateLock: false,
  color: ['#4983de', '#6fcf97', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [0, 0, 0, 0],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: false,
  },
  title: {
    name: '总数',
    fontSize: 15,
    color: '#666666',
  },
  subtitle: {
    name: '0',
    fontSize: 20,
    color: '#7cb5ec',
  },
  extra: {
    ring: {
      ringWidth: 25,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 0,
      border: false,
      borderWidth: 3,
      borderColor: '#FFFFFF',
    },
  },
});
const chartData2 = ref({
  series: [
    {
      data: [{ name: '男', value: 0 }, { name: '女', value: 0 }],
    },
  ],
});
const opts3 = ref({
  rotate: false,
  rotateLock: false,
  color: ['#4983de', '#6fcf97', '#f7be6c', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [0, 0, 0, 0],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: false,
  },
  title: {
    name: '总数',
    fontSize: 15,
    color: '#666666',
  },
  subtitle: {
    name: '0',
    fontSize: 20,
    color: '#7cb5ec',
  },
  extra: {
    ring: {
      ringWidth: 25,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 20,
      labelWidth: 0,
      border: false,
      borderWidth: 3,
      borderColor: '#FFFFFF',
    },
  },
});
const chartData3 = ref({
  series: [
    {
      data: [
        { name: '985/211/双一流', value: 0 },
        { name: '普通本科高校', value: 0 },
        { name: '专科学校', value: 0 },
      ],
    },
  ],
});
const opts4 = ref({
  rotate: false,
  rotateLock: false,
  color: ['#4983de', '#6fcf97', '#f7be6c', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [0, 0, 0, 0],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: false,
  },
  title: {
    name: '总数',
    fontSize: 15,
    color: '#666666',
  },
  subtitle: {
    name: '0',
    fontSize: 20,
    color: '#7cb5ec',
  },
  extra: {
    ring: {
      ringWidth: 25,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 0,
      border: false,
      borderWidth: 3,
      borderColor: '#FFFFFF',
    },
  },
});
const chartData4 = ref({
  series: [
    {
      data: [
        { name: '博士', value: 0 },
        { name: '硕士', value: 0 },
        { name: '本科', value: 0 },
        { name: '专科', value: 0 }],
    },
  ],
});

const onClickChangeType = (index: number, position_id:number) => {
  currentType.value = index;
  getStatisticsJob(totalCurrentType.value, position_id)
}
const totalCurrentType = ref(1);  //1全部职位 2我的职位
const totalTitleTypeList = [
  {
    id: 1,
    content: '全部职位'
  },
  {
    id: 2,
    content: '  我的职位'
  }
]
const onClickChangeTotalType = (index: number) => {
  totalCurrentType.value = index+1;
  getStatisticsJob(totalCurrentType.value)
}

const currentType = ref(0);
const titleTypeList:any = reactive([
  {
    id: 0,
    content: '全部'
  }
]);
async function getStatisticsJobType(type:number) {  //1公司  2用户
  let r = await statisticsJobType({type: type});
  console.log('统计类型结果:::', r);
  if (!r) {
    uni.showToast({title:"加载失败"});
    return;
  }
  for (let i = 0; i < r.length; i++) {
    let item = r[i];
    titleTypeList.push({
      id: item.position.id,
      content: item.position.content
    });
  }
  if (r.length > 0) {
    await getStatisticsJob(currentType.value)
  }
}
const qualificationDetail = ref({
  first_count: 0,
  second_count: 0,
  third_count: 0,
  fourth_count: 0,
  total: 1
})
const genderDetail = ref({
  male_count: 0,
  woman_count: 0,
  total: 1
})
const schoolTypeDetail = ref({
  a: 0,
  b: 0,
  c: 0,
  total: 1
})
const nativePlaceList = ref([])
const nativePlaceTotal = ref(0)
const changeProgress = (index: number) => {
  return nativePlaceList.value[index].width > 0 ? `w-[${nativePlaceList.value[index].width}rpx]` : '';
}

const schoolList = ref([])
const schoolTotal = ref(0)
async function getStatisticsJob(type:number, position_id=0, start_time='0', end_time='0') {
  let params:any = {
    type: type
  }
  if (position_id > 0) {
    params.position_id = position_id;
  }
  if (start_time != '0') {
    params.start_time = start_time;
  }
  if (end_time != '0') {
    params.end_time = end_time;
  }
  let r = await statisticsJob(params);
  console.log('统计结果:::', r);
  if (!r) {
    uni.showToast({title:"加载失败"});
    return;
  }
  //职位状态
  chartData1.value = {
    series: [
      {
          data: [
            { name: '查看简历', centerText: r.resume_look_count, value: parseInt(r.resume_look_count) },
            { name: '已联系', centerText: r.resume_talk_count, value: parseInt(r.resume_talk_count) },
            { name: '通过初筛', centerText: r.resume_ready_count, value: parseInt(r.resume_ready_count) },
            { name: '通过初试', centerText: r.resume_first_count, value: parseInt(r.resume_first_count) },
            { name: '通过复试', centerText: r.resume_second_count, value: parseInt(r.resume_second_count) },
            { name: '通过终试', centerText: r.resume_finish_count, value: parseInt(r.resume_finish_count) },
            { name: '已签约', centerText: r.resume_success_count, value: parseInt(r.resume_success_count) },
        ],
      },
    ],
  };
  //性别
  let total2 = parseInt(r.male_count) + parseInt(r.woman_count);
  opts2.value.subtitle.name = total2+"";
  chartData2.value = {
    series: [
      {
        data: [
          { name: '男', value: parseInt(r.male_count) },
          { name: '女', value: parseInt(r.woman_count) },
        ],
      },
    ],
  }
  genderDetail.value.male_count = r.male_count
  genderDetail.value.woman_count = r.woman_count
  genderDetail.value.total = total2
  //学校类别
  let total3 = parseInt(r.scool_first_count) + parseInt(r.scool_second_count) + parseInt(r.scool_third_count);
  opts3.value.subtitle.name = total3+"";
  chartData3.value = {
    series: [
      {
        data: [
          { name: '985/211/双一流', value: parseInt(r.scool_first_count) },
          { name: '普通本科高校', value: parseInt(r.scool_second_count) },
          { name: '专科学校', value: parseInt(r.scool_third_count) },
        ],
      },
    ],
  }
  schoolTypeDetail.value.a = r.scool_first_count
  schoolTypeDetail.value.b = r.scool_second_count
  schoolTypeDetail.value.c = r.scool_third_count
  schoolTypeDetail.value.total = total3
  //学历
  chartData4.value.series[0].data[0].value = parseInt(r.qualification_first_count)
  chartData4.value.series[0].data[1].value = parseInt(r.qualification_second_count)
  chartData4.value.series[0].data[2].value = parseInt(r.qualification_third_count)
  chartData4.value.series[0].data[3].value = parseInt(r.qualification_fourth_count)
  let total = parseInt(r.qualification_first_count) + parseInt(r.qualification_second_count) + parseInt(r.qualification_third_count) + parseInt(r.qualification_fourth_count)
  opts4.value.subtitle.name = total+"";
  qualificationDetail.value.first_count = r.qualification_first_count
  qualificationDetail.value.second_count = r.qualification_second_count
  qualificationDetail.value.third_count = r.qualification_third_count
  qualificationDetail.value.fourth_count = r.qualification_fourth_count
  qualificationDetail.value.total = total
  //籍贯
  r.province_count.map((item:any) => {
    nativePlaceTotal.value += item.province_count;
    return;
  })
  nativePlaceList.value = r.province_count.map((item:any) => {
    return {
      count: item.province_count,
      name: item.province_name,
      width: parseInt(item.province_count) / nativePlaceTotal.value * 200
    }
  })
  console.log('籍贯详情:::', nativePlaceList.value);
  console.log('籍贯总数:::', nativePlaceTotal.value);
  //来源学校
  schoolList.value = r.school_count.map((item:any) => {
    schoolTotal.value += item.school_count;
    return {
      count: item.school_count,
      name: item.school_name
    }
  })

}

onLoad(()=> {
  getStatisticsJobType(1);
})
</script>

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared',
  },
};
</script>

<style lang="scss" scoped>
.block-box {
  @apply mx-auto mb-24rpx w-[702rpx] shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191, 191, 191, 0.26)] rounded-[20rpx] bg-#fff p-24rpx px-12rpx;

  :deep(.u-cell__body) {
    @apply px-0 py-12rpx min-h-96rpx;
  }

  :deep(.u-textarea__field) {
    @apply text-26rpx;
  }
}

.top-tabs {
  .active .text {
    color: #1664FF;

    @apply relative;

    &::after {
      position: absolute;
      bottom: -4rpx;
      left: 0;
      width: 120rpx;
      height: 8rpx;
      background: linear-gradient(90deg, #1f69fb 3%, rgb(83 178 252 / 0%) 98%);
      opacity: 0.5;
      content: '';
    }
  }
}
.progress {

}
</style>
